<script>
import { ImagePreview, Toast } from "vant";
import axios from "axios";
import { appfile } from "@/api/modules/home";
import { addImage } from "@/api/modules/order";

export default {
  computed: {
    base64UrlGetter() {
      return this.$store.getters.base64UrlGetter;
    },
    userInfo() {
      return this.$store.getters.userInfoGetter;
    },
  },
  data() {
    return {
      imageList: [],
    };
  },
  mounted() {
    window.showBitmapBase64 = this.showBitmapBase64;
    console.log(3333, 111, 222);
    this.getAppfile();
  },
  methods: {
    async getAppfile() {
      const { code, data } = await appfile({
        ...this.$route.query,
        fileType: "0",
      });
      if (code === 200) {
        this.imageList = data;
      }
    },
    clickImg(index) {
      ImagePreview({
        images: [...this.imageList],
        closeable: true,
        startPosition: index,
      });
    },
    async afterRead() {
      try {
        // eslint-disable-next-line no-undef
        window.android.goCameraActivity();
        // 此时可以自行将文件上传至服务器
      } catch (e) {
        console.log(e, 11);
      }

      // this.showBitmapBase64();
    },

    async showBitmapBase64(file) {
      Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "上传中...",
      });
      this.loading = true;
      let obj = {};
      obj.data = file;
      obj.packageName = `image/app/${this.userInfo.parkCode}/${this.$route.query.roadCode}`;
      axios
        .post(
          `${process.env.VUE_APP_UPLOAD_URL}/file/manage/upload/base64`,
          obj
        )
        .then(async (res) => {
          await addImage({
            imageUrl: res.data.data,
            parkingRecordId: this.$route.query.parkingRecordId,
            tollmanId: this.userInfo.id,
          });
          await this.getAppfile();
          Toast.clear();
        })
        .catch(() => {
          Toast.clear();
        });
    },
  },
};
</script>

<template>
  <div class="ImagePreview">
    <div class="carFormHead">
      <van-nav-bar title="查看图片">
        <template #left>
          <span
            style="font-size: 30px; background-color: #06c68a; padding: 4px 0"
            @click="$router.go(-1)"
            class="tc ting-fanhui"
            >返回
          </span>
        </template>
        <template #right>
          <span @click="afterRead" class="tc">补拍照片 </span>
        </template>
      </van-nav-bar>
    </div>

    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in imageList" :key="index">
        <img class="myImg" :src="image" @click="clickImg(index)" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<style scoped lang="scss">
.ImagePreview {
  width: 100%;
  height: 100vh;

  .myImg {
    width: 100%;
    height: calc(100vh - 50px);
  }
}
</style>
